<template>
    <div class="hp100">
        <TableList
            :columns="recordCol"
            :data="recordList"
            :page.sync="query.pageIndex"
            :size.sync="query.pageSize"
            :total="recordTotal"
            :loading="recordLoading"
            @queryFun="getAnswerRecord"
        ></TableList>
        <Modal
            v-model="showExamDetail"
            width="1000"
            footer-hide
            class-name="fix-height-modal"
            title="答题详情"
        >
            <exam-detail
                ref="examDetail"
                :UEInfo="curUEInfo"
                type="expQuestion"
                v-if="showExamDetail"
            ></exam-detail>
        </Modal>
    </div>
</template>
<script>
import examDetail from './answerQuestionDetail.vue';
import { answerRecord } from '@/api/selfStudy/class_new.js';
export default {
    name: 'AnswerRecord',
    props: ['classNumberId', 'classId'],
    components: { examDetail },
    data() {
        return {
            query: {
                pageIndex: 1,
                pageSize: 10
            },
            recordList: [],
            recordTotal: 0,
            showExamDetail: false,
            curUEInfo: {},
            recordCol: [
                //学员名称 课件名称 题目数量 答题数量 正确数量 详情进入查看这个学员的答题详情
                {
                    type: 'index',
                    title: '序号'
                },
                {
                    title: '学员昵称',
                    key: 'studentName'
                },
                {
                    title: '课件名称',
                    key: 'ecName',
                    tooltip: true
                },
                {
                    title: '题目数量',
                    key: 'expQuestionNum'
                },
                {
                    title: '答题数量',
                    key: 'expAnswerNum'
                },
                {
                    title: '正确数量',
                    key: 'expAnswerOkNum'
                },
                {
                    title: '操作',
                    key: 'action',
                    opList: [
                        {
                            txt: '答题详情',
                            disabled: (data) => {
                                return data.expQuestionNum == 0 || data.expAnswerNum == 0;
                            },
                            fun: (data) => {
                                this.curUEInfo = data;
                                this.showExamDetail = true;
                            }
                        }
                    ]
                }
            ],
            timeout: '',
            recordLoading: false,

        };
    },
    computed: {},
    watch: {
        classNumberId: function(val) {
            this.getAnswerRecord();
        }
    },
    filters: {},
    created() {},
    mounted() {
        if (this.classNumberId) {
            this.getAnswerRecord();
        }
    },
    beforeDestroy() {
        clearTimeout(this.timeout);
    },
    methods: {
        // getData(page, size) {
        //     this.query.pageIndex = page;
        //     this.query.pageSize = size;
        //     if (this.classNumberId) {
        //         this.getAnswerRecord();
        //     }
        // },
        getAnswerRecord () {
            this.recordLoading = true;
            answerRecord(this.classId, this.classNumberId, this.query)
                .then((data) => {
                    if (data.code == 1) {
                        this.recordList = data.data.items;
                        this.recordTotal = data.data.total;
                        clearTimeout(this.timeout);
                        if (this.status === 1) {
                            this.timeout = setTimeout(() => {
                                this.getAnswerRecord();
                            }, 5000);
                        }
                    } else {
                        this.$Message.warning(data.message);
                    }
                    this.recordLoading = false
                })
                .catch((error) => {
                    this.recordLoading = false;
                    this.$Message.error(error.message);
                });
        },
        changePage(page) {
            this.query.pageIndex = page;
            this.getAnswerRecord();
        }
    }
};
</script>
<style scoped></style>
